<!DOCTYPE html>
<html lang="<?php echo $lang; ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $t['siteTitle']; ?></title>
    <meta name="description" content="<?php echo $t['metaDescription']; ?>">
    <!-- 外部资源 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#8B0000', // 王者红
                        secondary: '#DAA520', // 荣耀金
                        accent: '#FFD700', // 金色强调
                        dark: '#1A0F0B', // 深色背景
                        light: '#F9F2E8' // 浅色文本
                    },
                    fontFamily: {
                        sans: ['Microsoft YaHei', 'SimHei', 'sans-serif'],
                        serif: ['"Ma Shan Zheng"', 'STKaiti', 'serif']
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
            }
            .text-shadow-lg {
                text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
            }
            .bg-blur {
                backdrop-filter: blur(8px);
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-8px);
                box-shadow: 0 12px 20px rgba(0, 0, 0, 0.5);
            }
            .gold-gradient {
                background: linear-gradient(135deg, #D4AF37 0%, #F9F292 50%, #D4AF37 100%);
            }
            .red-gradient {
                background: linear-gradient(135deg, #8B0000 0%, #CD5C5C 50%, #8B0000 100%);
            }
        }
    </style>
    
</head>
<body class="font-garden bg-white text-garden-emerald">
    <!-- 导航栏继续 -->
        <div class="container mx-auto px-4 py-3 flex items-center justify-between bg-dark/80 bg-blur border-b border-secondary/30">
            <!-- 网站Logo -->
            <a href="#" class="flex items-center">
                <div class="w-10 h-10 rounded-full gold-gradient flex items-center justify-center mr-3">
                    <span class="font-serif text-primary text-xl font-bold">王</span>
                </div>
                <h1 class="text-2xl font-serif text-white">王者荣耀</h1>
            </a>
            
            <!-- 桌面导航菜单 -->
            <nav class="hidden md:flex items-center space-x-8">
                <?php foreach ($t['nav'] as $item): ?>
                    <a href="<?php echo $item['link']; ?>" class="text-light hover:text-accent transition-colors duration-300 <?php echo isset($item['isCta']) ? 'bg-primary hover:bg-primary/80 text-white px-5 py-2 rounded-md red-gradient' : ''; ?>">
                        <?php echo $item['name']; ?>
                    </a>
                <?php endforeach; ?>
            </nav>
            
            <!-- 语言选择器 -->
            <div class="hidden md:block relative">
                <button id="langToggle" class="flex items-center text-light hover:text-accent transition-colors">
                    <i class="fa fa-globe mr-2"></i>
                    <span><?php echo $t['lang'][$lang]; ?></span>
                    <i class="fa fa-chevron-down ml-2 text-xs"></i>
                </button>
                <div id="langDropdown" class="absolute right-0 mt-2 w-36 bg-dark border border-secondary/30 rounded-md hidden">
                    <?php foreach ($availableLangs as $l): ?>
                        <a href="?lang=<?php echo $l; ?>" class="block px-4 py-2 hover:bg-primary/50 transition-colors <?php echo $l == $lang ? 'bg-primary/30' : ''; ?>">
                            <?php echo $t['lang'][$l]; ?>
                        </a>
                    <?php endforeach; ?>
                </div>
            </div>
            
            <!-- 移动端菜单按钮 -->
            <button id="mobileMenuBtn" class="md:hidden text-light text-2xl">
                <i class="fa fa-bars"></i>
            </button>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobileMenu" class="md:hidden bg-dark/95 bg-blur fixed inset-0 z-50 transform translate-x-full transition-transform duration-300">
            <div class="flex justify-end p-4">
                <button id="closeMenuBtn" class="text-light text-2xl">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <nav class="flex flex-col items-center space-y-6 mt-10">
                <?php foreach ($t['nav'] as $item): ?>
                    <a href="<?php echo $item['link']; ?>" class="text-light text-xl hover:text-accent transition-colors duration-300 <?php echo isset($item['isCta']) ? 'bg-primary hover:bg-primary/80 text-white px-8 py-3 rounded-md red-gradient' : ''; ?>">
                        <?php echo $item['name']; ?>
                    </a>
                <?php endforeach; ?>
                
                <!-- 移动端语言选择 -->
                <div class="mt-6 pt-6 border-t border-secondary/30 w-3/4">
                    <p class="text-center mb-4 text-light/80"><?php echo $t['lang'][$lang]; ?></p>
                    <div class="grid grid-cols-2 gap-2">
                        <?php foreach ($availableLangs as $l): ?>
                            <a href="?lang=<?php echo $l; ?>" class="text-center py-2 border border-secondary/30 rounded-md hover:bg-primary/30 transition-colors">
                                <?php echo $t['lang'][$l]; ?>
                            </a>
                        <?php endforeach; ?>
                    </div>
                </div>
            </nav>
        </div>
    </header>

    <!-- 英雄区域/Hero Section -->
    <section class="relative h-screen flex items-center overflow-hidden">
        <!-- 背景图 -->
        <div class="absolute inset-0 z-0">
            <img src="https://picsum.photos/id/100/1920/1080" alt="王者荣耀游戏场景" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-gradient-to-r from-dark via-dark/80 to-transparent"></div>
        </div>
        
        <!-- 内容 -->
        <div class="container mx-auto px-4 relative z-10">
            <div class="max-w-2xl">
                <div class="inline-block px-4 py-1 border border-accent/50 rounded-full text-accent text-sm mb-6 animate-pulse">
                    <?php echo $t['hero']['version']; ?>
                </div>
                <h1 class="text-[clamp(2.5rem,8vw,5rem)] font-serif font-bold leading-none text-shadow-lg mb-6">
                    <?php echo $t['hero']['title']; ?>
                </h1>
                <p class="text-[clamp(1rem,3vw,1.25rem)] text-light/90 mb-8 max-w-xl">
                    <?php echo $t['hero']['subtitle']; ?>
                </p>
                <div class="flex flex-wrap gap-4">
                    <a href="<?php echo $t['hero']['cta1']['link']; ?>" class="px-8 py-3 bg-primary hover:bg-primary/90 text-white rounded-md font-medium transition-all duration-300 transform hover:scale-105 red-gradient">
                        <?php echo $t['hero']['cta1']['text']; ?>
                    </a>
                    <a href="<?php echo $t['hero']['cta2']['link']; ?>" class="px-8 py-3 bg-transparent border border-accent text-accent hover:bg-accent/10 rounded-md font-medium transition-all duration-300 flex items-center">
                        <span><?php echo $t['hero']['cta2']['text']; ?></span>
                        <i class="fa <?php echo $t['hero']['cta2']['icon']; ?> ml-2"></i>
                    </a>
                </div>
            </div>
        </div>
        
        <!-- 底部渐变遮罩 -->
        <div class="absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-t from-dark to-transparent"></div>
        
        <!-- 向下滚动指示 -->
        <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 text-light/70 animate-bounce">
            <i class="fa fa-chevron-down text-2xl"></i>
        </div>
    </section>

    <!-- 游戏特色 -->
    <section id="features" class="py-20 bg-dark relative overflow-hidden">
        <div class="container mx-auto px-4">
            <div class="text-center max-w-3xl mx-auto mb-16">
                <p class="text-accent mb-3"><?php echo $t['features']['pretitle']; ?></p>
                <h2 class="text-[clamp(1.5rem,5vw,3rem)] font-serif font-bold mb-6"><?php echo $t['features']['title']; ?></h2>
                <p class="text-light/70"><?php echo $t['features']['subtitle']; ?></p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <?php foreach ($t['features']['items'] as $item): ?>
                    <div class="bg-dark border border-secondary/20 rounded-lg p-8 card-hover">
                        <div class="w-16 h-16 rounded-full bg-primary/20 flex items-center justify-center mb-6">
                            <i class="fa <?php echo $item['icon']; ?> text-2xl text-accent"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-4 text-white"><?php echo $item['title']; ?></h3>
                        <p class="text-light/70"><?php echo $item['desc']; ?></p>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
        
        <!-- 装饰元素 -->
        <div class="absolute top-1/4 left-0 w-64 h-64 bg-primary/5 rounded-full filter blur-3xl"></div>
        <div class="absolute bottom-1/4 right-0 w-96 h-96 bg-secondary/5 rounded-full filter blur-3xl"></div>
    </section>

    <!-- 英雄展示 -->
    <section id="characters" class="py-20 bg-gradient-to-b from-dark to-dark/95">
        <div class="container mx-auto px-4">
            <div class="text-center max-w-3xl mx-auto mb-16">
                <p class="text-accent mb-3"><?php echo $t['characters']['pretitle']; ?></p>
                <h2 class="text-[clamp(1.5rem,5vw,3rem)] font-serif font-bold mb-6"><?php echo $t['characters']['title']; ?></h2>
                <p class="text-light/70"><?php echo $t['characters']['subtitle']; ?></p>
            </div>
            
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6">
                <?php foreach ($t['characters']['items'] as $hero): ?>
                    <div class="group relative overflow-hidden rounded-lg card-hover">
                        <img src="<?php echo $hero['image']; ?>" alt="<?php echo $hero['alt']; ?>" class="w-full h-96 object-cover transition-transform duration-700 group-hover:scale-110">
                        <div class="absolute inset-0 bg-gradient-to-t from-dark via-dark/50 to-transparent"></div>
                        <div class="absolute bottom-0 left-0 right-0 p-5">
                            <span class="text-xs text-accent/80 mb-1 block"><?php echo $hero['class']; ?></span>
                            <h3 class="text-xl font-bold text-white mb-2"><?php echo $hero['name']; ?></h3>
                            <p class="text-light/70 text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                <?php echo $hero['desc']; ?>
                            </p>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
            
            <div class="text-center mt-12">
                <a href="#" class="inline-flex items-center text-accent hover:text-white transition-colors">
                    <span><?php echo $t['characters']['moreLink']; ?></span>
                    <i class="fa fa-arrow-right ml-2"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- 皮肤展示 -->
    <section id="screenshots" class="py-20 bg-dark relative">
        <div class="container mx-auto px-4">
            <div class="text-center max-w-3xl mx-auto mb-16">
                <p class="text-accent mb-3"><?php echo $t['screenshots']['pretitle']; ?></p>
                <h2 class="text-[clamp(1.5rem,5vw,3rem)] font-serif font-bold mb-6"><?php echo $t['screenshots']['title']; ?></h2>
                <p class="text-light/70"><?php echo $t['screenshots']['subtitle']; ?></p>
            </div>
            
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                <?php foreach ($t['screenshots']['items'] as $skin): ?>
                    <div class="relative overflow-hidden rounded-lg group card-hover">
                        <img src="<?php echo $skin['image']; ?>" alt="<?php echo $skin['alt']; ?>" class="w-full h-64 object-cover transition-transform duration-700 group-hover:scale-110">
                        <div class="absolute inset-0 bg-gradient-to-t from-dark to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                    </div>
                <?php endforeach; ?>
            </div>
            
            <div class="text-center mt-12">
                <a href="#" class="inline-flex items-center text-accent hover:text-white transition-colors">
                    <span><?php echo $t['screenshots']['moreLink']; ?></span>
                    <i class="fa fa-arrow-right ml-2"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- JavaScript 交互 -->
    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('bg-dark/95', 'shadow-lg');
                navbar.classList.remove('bg-transparent');
            } else {
                navbar.classList.remove('bg-dark/95', 'shadow-lg');
                navbar.classList.add('bg-transparent');
            }
        });
        
        // 语言选择器
        const langToggle = document.getElementById('langToggle');
        const langDropdown = document.getElementById('langDropdown');
        
        if (langToggle && langDropdown) {
            langToggle.addEventListener('click', function() {
                langDropdown.classList.toggle('hidden');
            });
            
            // 点击外部关闭下拉菜单
            document.addEventListener('click', function(event) {
                if (!langToggle.contains(event.target) && !langDropdown.contains(event.target)) {
                    langDropdown.classList.add('hidden');
                }
            });
        }
        
        // 移动端菜单
        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
        const closeMenuBtn = document.getElementById('closeMenuBtn');
        const mobileMenu = document.getElementById('mobileMenu');
        
        if (mobileMenuBtn && closeMenuBtn && mobileMenu) {
            mobileMenuBtn.addEventListener('click', function() {
                mobileMenu.classList.remove('translate-x-full');
            });
            
            closeMenuBtn.addEventListener('click', function() {
                mobileMenu.classList.add('translate-x-full');
            });
            
            // 点击菜单链接后关闭菜单
            const mobileLinks = mobileMenu.querySelectorAll('a');
            mobileLinks.forEach(link => {
                link.addEventListener('click', function() {
                    mobileMenu.classList.add('translate-x-full');
                });
            });
        }
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                }
            });
        });
    </script>
    